<template>
  <Form
    class="form-wrapper"
    v-if="cloneConfig&&cloneConfig.show"
    ref="form"
    :model="data"
    :label-width="cloneConfig.labelWidth"
    :label-position="cloneConfig.labelPosition"
    @on-validate="onValidate"
  >
    <Row :gutter="24" type="flex" justify="start" style="padding: 2px 5px">
      <Col
        v-for="(item, index) in cloneConfig.columns.filter(
          (c) => c.line != true
        )"
        :key="index"
        :span="24 / (G_IsMobile ? 1 : cloneConfig.cols)"
      >
        <AtomFormItem
          :item="item"
          :value="tools.lodash.get(data, item.key)"
          :rules="item.rules?item.rules:cloneConfig.rules[item.key]"
          :onlyRead="cloneConfig.onlyRead"
          @change="change(item.key, $event)"
        ></AtomFormItem>
      </Col>
      <Col
        v-for="(item, index) in cloneConfig.columns.filter(
          (c) => c.line === true
        )"
        :key="'line' + index"
        :span="24"
      >
        <AtomFormItem
          :item="item"
          :value="tools.lodash.get(data, item.key)"
          :rules="item.rules?item.rules:cloneConfig.rules[item.key]?cloneConfig.rules[item.key]:{}"
          :onlyRead="cloneConfig.onlyRead"
          @change="change(item.key, $event)"
        ></AtomFormItem>
      </Col>
    </Row>
    <slot></slot>
    <Row :gutter="24" type="flex" justify="end">
        <FormItem>
          <Button type="primary" @click="handleSearch">{{lang.search}}</Button>
          <Button class="ivu-ml-8" @click="handleReset">{{lang.reset}}</Button>
          <a v-font="14" class="ivu-ml-8" @click="config.show = false">
            {{lang.collapse}} <Icon type="ios-arrow-up" />
          </a>
        </FormItem>
    </Row>
  </Form>
</template>

<script>
import AtomEditor from "./parts/AtomEditor";
import { merge, cloneDeep } from "lodash";
export default {
  name: "AtomSearchForm",
  components: { AtomEditor },
  data() {
    return {
      cloneConfig: null,
      grid: {
        xs: 24,
        sm: 24,
        md: 12,
        lg: 8,
        xl: 8,
        xxl:8,
      },
    };
  },
  props: {
    data: {
      default: () => {
        return {};
      },
    },
    config: {
      default: () => {
        return {};
      },
    },
  },
  computed: {
    defaultConfig() {
      return {
        labelWidth: 100, //标签宽度
        labelPosition: "right", //标签位置
        cols: 3, //列数
        onlyRead: false, //是否只读，如果只读则显示span
        collapse:false,
        columns: [
          //字段配置
        ],
        rules: {},
      };
    },
    lang(){
      return {
        "en-US": {
          search:'search',
          reset:'reset',
          small:'small',
          expand:'expand',
          collapse:'collapse',
        },
        "zh-CN": {
          search:'查询',
          reset:'重置',
          expand:'展开',
          collapse:'收起',
        },
      }[this.G_Locale]
    },
  },
  watch: {
    config: {
      handler(val) {
        this.cloneConfig = merge(this.cloneConfig, this.config);
      },
      deep: true,
    },
  },
  mounted() {
    this.setConfig();
    this.$nextTick(() => {
      this.$emit("onload", this);
    });
  },
  methods: {
    setConfig() {
      this.cloneConfig = merge(this.defaultConfig, this.config);
      Object.keys(this.cloneConfig).map((key) => {
        this.$set(this.config, key, this.cloneConfig[key]);
      });
    },
    change(key, val) {
      this.tools.lodash.set(this.data, key, val);
      this.$emit("change", key, val);      
    },
    onValidate(prop, status, error) {
      this.$emit('validate',prop,status,error);
    },
    validate(callback){
      return this.$refs.form.validate(callback)
    },
    validateField(prop,callback){
      this.$refs.form.validateField(prop,callback)
    },
    resetFields(){
      this.$refs.form.resetFields();
    },
    handleSearch(){
      let data = {};
      let filter ='';
      this.cloneConfig.columns.map((item,index) => {
        let value = this.tools.lodash.get(this.data, item.key);
        let logic = item.default.logic;
        if(Object.keys(data).length===0) {
          logic='';
        }
        if(value){
          filter =filter+ logic+item.key+item.default.operator+this.formatValue(value);
          this.tools.lodash.set(data, item.key,this.formatValue(value));
        }else{
          if(item.default.empty){
            filter = filter+logic+item.key+item.default.operator+this.formatValue(item.default.value);
            this.tools.lodash.set(data, item.key,this.formatValue(item.default.value));
          }
        }
      })
      console.log(this.data,data,filter)
      this.$emit('handleSearch',this.data,data,filter);
    },
    handleReset(){
      let data = {};
      let completeData = {};
      this.cloneConfig.columns.map((item,index) => {
        this.tools.lodash.set(completeData, item.key,item.default.value);
        let value = this.tools.lodash.get(this.data, item.key);
        if(value){
          this.tools.lodash.set(data, item.key,value);
        }else{
          if(item.default.empty){
            this.tools.lodash.set(data, item.key,item.default.value);
          }
        }
      })
      this.resetFields();
      this.$emit('handleReset',this.data,completeData,data);

    },
    formatValue(val){
      if(val===null){
        return null;
      }
      if(val===''){
        return '';
      }
      switch(typeof val){
        case 'string':
          return `'${val}'`;
        case 'object':
          return `'${JSON.stringify(val)}'`;
        default:
          return val;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.form-wrapper {
  width: 100%;
  height: auto;
  padding: 0px 10px;
}
.collapse-form {
    width: 100%;
    position: absolute;
    left:0px;
    top:0px;
    z-index: 99;
  }
</style>
